<template>
  <div class="newTimingTaskContainer">
    <div
      class="dialog animated"
      :class="open? 'fadeIn':'fadeOut'"
      v-show="show"
      :style="{visibility: (visible?'visible':'hidden')}"
    >
      <div class="panel animated" :class="open? 'zoomIn':''">
        <div class="title">
          {{title}}
          <div class="close" @click="cancel()"></div>
        </div>
        <table class="table" cellspacing="0">
          <thead class="thead">
            <tr>
              <td style="width: 4rem;">bean名称</td>
              <td style="width: 4rem;">参数</td>
              <td style="width: 4rem;">状态</td>
              <td style="width: 6rem;">错误信息</td>
              <td style="width: 4rem;">耗时（毫秒）</td>
              <td style="width: 4rem;">执行时间</td>
            </tr>
          </thead>
          <tbody class="tbody">
            <tr v-for="item,index in timingTaskLogList">
              <td>{{item.beanName}}</td>
              <td>{{item.params}}</td>
              <td>{{item.status == 0?"成功":"失败"}}</td>
              <td style="word-break: break-all; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;">{{item.error}}</td>
              <td>{{item.times}}</td>
              <td>{{item.createTime}}</td>
            </tr>
          </tbody>
        </table>
        <el-pagination
          class="page"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="tabledisplayObj.currentPage"
          @size-change="pageSizeChange"
          @current-change="tabledisplayChangePage"
          :total="tabledisplayObj.total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
var vm;
export default {
  data: function() {
    return {
      show: false,
      open: false,
      visible: false,
      isAdd: true,
      tabledisplayObj: {
        currPage: 1,
        pageSize: 10,
        total: 0
      },
      title: "任务日志列表",
      timingTaskLogList: []
    };
  },
  methods: {
    init: function(data) {
      vm.show = true;
      setTimeout(function() {
        vm.open = true;
        vm.visible = true;
      }, 11);
      vm.initData();
    },
    initData() {
      api.scheduleLogList(vm.tabledisplayObj).then(function(data) {
        if (data.resultCode == 2000) {
          vm.tabledisplayObj.total = data.totalCount;
          vm.timingTaskLogList = data.list;
        } else {
          vm.$message.error(data.message);
        }
      });
    },
    pageSizeChange: function(val) {
      vm.tabledisplayObj.pageSize = val;
      vm.initData();
    },
    /**表格显示形式翻页 */
    tabledisplayChangePage(val) {
      vm.tabledisplayObj.currPage = val;
      vm.initData();
    },
    cancel: function() {
      //隐藏弹窗
      vm.open = false;
      vm.isAdd = true;
      setTimeout(function() {
        vm.show = false;
        vm.visible = false;
      }, 500);
    }
  },
  created: function() {
    vm = this;
  }
};
</script>
<style lang="scss">
.newTimingTaskContainer {
  .el-form-item__label {
    font-size: 0.16rem;
    color: #666666;
  }
  .el-checkbox__label {
    font-size: 0.16rem;
    color: #666666;
  }
}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped>
.panel {
  padding: 0.2rem;
}
</style>


